<template>
	<div class="base-info-content">
        <el-form ref="ruleFormRef" :model="goodsInfoData" :rules="rules" label-width="150px">
            <el-form-item label="商品详情：">
                <section style="max-width: 1400px;">
                    <Editor height="520px" v-model:get-html="goodsInfoData.note" />
                </section>
            </el-form-item>
		</el-form>
        <section style="text-align: center; margin: 10px 0;">
            <el-button type="primary" @click="previousStep">上一步</el-button>
            <el-button type="primary" @click="nextStep">下一步</el-button>
        </section>
	</div>
</template>

<script setup lang="ts" name="funWangEditor">
import { defineAsyncComponent, reactive } from 'vue';
const emit = defineEmits(['stepChange'])
// 引入组件
const Editor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
import { goodsInfo } from '/@/stores/goods';
const goodsInfoData = goodsInfo()

const rules = reactive<FormRules<any>>({
	note: [{ required: true, message: '请输入商品详情', trigger: 'blur' }],
})

// 上一步
const previousStep = () => {
    emit('stepChange', 'second')
}
// 下一步
const nextStep = () => {
    emit('stepChange', 'fifth')
}

</script>
<style lang="scss" scoped>
.base-info-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-form{
		flex:1;
		overflow-y: auto;
		position: relative;
	}
}
</style>